Project 1: SmugMug Lightbox
What: Interacting with a "lightbox" view of an image on SmugMug. * Where: http://dound.smugmug.com/gallery/4537915_CfDs5 * Who: David Underhill & Nopparut Abhinoraseth (Big) = Overview of the Interaction = SmugMug is a photo-sharing website. It displays a filmstrip of photo thumbnails and allows you to view images at various resolutions in the "lightbox" view. The lightbox isolates an enlarged photo by dimming the background. The interface feels very smooth because the lightbox comes up in response to a user's click and the image is asynchronously fetched on-demand (so the page does not have to reload from scratch). Furthermore, each time the user changes the view, the URL is changed (without reloading the page). This enables a user to save the URL at any time and later come back to that exact same view. This technique is called deep links as the link incorporates the state of the application. = About the Interaction = * What is most interesting about the interaction? ** Page interactions are initiated by changing the URL "anchor" (e.g. page.html#anchorName) *** Every link/button on the page that can trigger interaction is actually just links to the current page with different "#anchorName". *** Since each link is just anchor changing, when the users click at it (to do some action), the location in address bar will be changed, but browser will not redirect to another page since we only change the anchor. *** Then, a JavaScript timer is used to periodically detect changes to the URL so the page can change the page’s state accordingly. *** When JavaScript detects a change to the anchor, it decodes the anchorName and triggers the interaction accordingly (e.g. a photo popping up, a box sliding, etc). *** We can think of the URL location as a bottleneck function to change the page's state when we pass an appropriate argument ("#anchorName"). This can make designing an interactive page very systematic since all the links/buttons on the page are just the clients of that function. So, once we finish debugging the function, anyone (links) can just call it, i.e., we don't have to try to debug all links on the page as long as we are certain the function is correct. *** This will also enables deep links - if the user saves and then later uses a URL later, the page will be in the same configuration as the user left it! *** URL examples: Default View: http://dound.smugmug.com/gallery/4537915_CfDs5 Small Image Popped Up: http://dound.smugmug.com/gallery/4537915_CfDs5#267283662_uQjNv-S-LB Large Image Popped Up: http://dound.smugmug.com/gallery/4537915_CfDs5#267283662_uQjNv-L-LB * What can the class learn from it? (***click on links below for simple examples***) *# "Deep Links" make designing an interactive more systematic and give the user a way to easily share or come back to a specific state in the application (e.g. the page will be the same as when they copied the URL). *# Animation can be achieved with a JavaScript timer. The timer can make small parameter changes to give the appearance of smooth animations. *# An interface can asynchronously query a server about what its state should be. * What is the role of JavaScript (event handlers, AJAX requests, etc.)? ** Timer used to check URL every 100ms (with setTimeout) ** Timer also used to animate nodes by changing the size of the node ** Mouse over event triggers the display of the photobar (smugPopular) ** XMLHttpRequest used to fetch images and how a user voted (thumb up or down); also used to send a user's vote * What parts of the interaction happen in the browser and what parts require server interaction? ** Browser *** Make and detect URL changes *** Display photobar and lightbox background *** Close the lightbox (zero traffic initiated) ** Server *** Image request/response *** Vote post/request/response * If data is fetched dynamically from the server, what is the granularity of those patches? Are there any special techniques for hiding latency, such as prefetching? ** Different image sizes are fetched as requested ** User's vote on a photo requested every time the user mouses over it ** No pre-fetching or other fancy techniques are used * Did the interaction have to contort itself to get around problems with the Web? * Are there improvements to the Web that would have made this interaction easier to implement, or that would have allowed a more powerful interaction? ** Yes, the code polls the URL value 10 times a second to detect changes. ** It would be better to register for a callback (event) when it changes. ** Unfortunately browsers do not support such a callback so polling must be used. * Are the techniques used in this interaction relevant for a broader class of interactions? ** The URL rewrite strategy is a nice way to support deep links. This could be used in almost any interactive application. ** The animated photobar slide out was a nice way to introduce a new element (timer + small changes = animation). Any JS-based animation probably uses this technique.